<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body切换颜色</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
    	*{margin: 0;padding: 0;}
    	form{
    		display: none;
    	}

    	@media(max-width: 800px){
    		button{
    			width: 100%;
    		}
    	}
    </style>
</head>
<body>
<button onclick="col('red')">红色</button>
<button onclick="col('yellow')">黄色</button>
<button onclick="col('blue')">蓝色</button>
<button onclick="color()" id="d">设为自定义颜色</button>
<form action="">
	<input type="range" id="r" min="0" max="255" value="255" onmousemove="color()"><span id="t1"></span>
	<input type="range" id="g" min="0" max="255" value="255" onmousemove="color()"><span id="t2"></span>
	<input type="range" id="b" min="0" max="255" value="255" onmousemove="color()"><span id="t3"></span>
</form>
<script>
	var form  = document.querySelector('form');
	var body  = document.querySelector('body');
    function col(a){
        body.style.background = a;
        form.style.display = 'none';
    }
    function color(){
        var r =document.getElementById("r").value;
        var g =document.getElementById("g").value;
        var b =document.getElementById("b").value;
        t1.innerHTML = r;
        t2.innerHTML = g;
        t3.innerHTML = b;
        form.style.display = 'block';
        body.style.background="rgb("+r+","+g+","+b+")";
    }
</script>
</body>
</html>